<template>
  <van-notice-bar left-icon="volume-o" :scrollable="false">
    <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
      <van-swipe-item>新品上新赠送试饮装</van-swipe-item>
      <van-swipe-item>赠茶样装</van-swipe-item>
      <van-swipe-item>武夷山大红袍五折特价</van-swipe-item>
    </van-swipe>
  </van-notice-bar>
</template>

<script>
export default {
}
</script>

<style scoped lang="less">
.van-notice-bar {
  background-color: #fbefd1;
  font-size: 13px;
  color: #222;

  /deep/ .van-icon-volume-o {
    color: #e4393c;
    font-size: 18px;
  }

  .van-swipe::before {
    content: '专区满赠';
    background: #e4393c;
    color: #fff;
    font-size: 13px;
    padding: 2px 5px;
    margin-top: 15px;
    height: 18px;
    line-height: 18px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    border-radius: 3px;
  }

  .van-swipe-item {
    margin-left: 80px;
  }

  &::after {
    content: '去看看';
    width: auto;
    color: #999;
  }

  .notice-swipe {
    height: 35px;
    line-height: 35px;
  }
}
</style>

